<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/echarts.js"></script>
    <script src="/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<!--事件函数可以该成动态读取部分的函数，现在是我静态图的函数-->
<button onclick="sex()">点击</button>
<hr>
<div id="online" style="width: 600px;height: 400px"></div>
<button onclick="line()">点击</button>

<script type="text/javascript">


    var all;
    var online;
    var offline;
    var man=0;
    var weman=0;
    var donotKonw=0;
    var number2= new Array();
    /*待修改部分*/
    $.ajax({
        type : 'GET',
        async : false, //同步执行
        url :'/chatRoom/getAll', //web.xml中注册的Servlet的url-pattern
        // data : {}, //无参数
        dataType : 'json', //返回数据形式为json
        success : function(data) {

            var num=0;
            all=data;
            for (var i in data) {
                if (data[i].sex == "男")
                    man++;
                if (data[i].sex == "女")
                    weman++;
                if (data[i].sex == "不详")
                    donotKonw++;
                num++;
            }
          //  number2.push(num);
        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    }); //ajax


    $.ajax({
        type : 'GET',
        async : false, //同步执行
        url :'/chatRoom/getNum', //web.xml中注册的Servlet的url-pattern
        // data : {}, //无参数
        dataType : 'json', //返回数据形式为json
        success : function(data) {

            number2.push(data[0]);
            number2.push(data[1]);
            number2.push(data[2]);

        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    }); //ajax

   /* $.ajax({
        type : 'GET',
        async : false, //同步执行
        url :'/chatRoom/getOnline', //web.xml中注册的Servlet的url-pattern
        // data : {}, //无参数
        dataType : 'json', //返回数据形式为json
        success : function(data) {

            online=data;
            var num=0;
            for (var i in data) {
                num++;
            }
            number2.push(num);

        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    }); //ajax

    $.ajax({
        type : 'GET',
        async : false, //同步执行
        url :'/chatRoom/getOffline', //web.xml中注册的Servlet的url-pattern
        // data : {}, //无参数
        dataType : 'json', //返回数据形式为json
        success : function(data) {

            offline=data;
            var num=0;
            for (var i in data) {
                num++;
            }
            number2.push(num);

        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    }); //ajax*/


    console.info(number2);

   /* 读入男女人数和不详的人数，存储为数组*/
   // var number=[200,310,250];/* 随便写的数据用来看效果的*/
 /*   在线情况*/
    var number=[man,weman,donotKonw];
    console.info("性别:"+number);
    function sex() {
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title : {
            text: 'SuperGod聊天室性别统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['男生','女生','不详']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        /*数据填入部分，value为数据值，从数据库读取*/
        series : [
            {
                name:'性别',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:number[0], name:'男生'},
                    {value:number[1], name:'女生'},
                    {value:number[2], name:'不详'},
                ]
            }
        ]
    };
    myChart.setOption(option);
    }
function line() {
   var myChart2 = echarts.init(document.getElementById('online'));

   option = {
       title : {
           text: 'SuperGod聊天室在线统计',
           x:'center'
       },
       tooltip : {
           trigger: 'item',
           formatter: "{a} <br/>{b} : {c} ({d}%)"
       },
       legend: {
           orient : 'vertical',
           x : 'left',
           data:['总数','在线','下线']
       },
       toolbox: {
           show : true,
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               magicType : {
                   show: true,
                   type: ['pie', 'funnel'],
                   option: {
                       funnel: {
                           x: '25%',
                           width: '50%',
                           funnelAlign: 'left',
                           max: 1548
                       }
                   }
               },
               restore : {show: true},
               saveAsImage : {show: true}
           }
       },
       calculable : true,
       series : [
           {
               name:'在线情况',
               type:'pie',
               radius : '55%',
               center: ['50%', '60%'],
               data:[
                   {value:number2[0], name:'总数'},
                   {value:number2[1], name:'在线'},
                   {value:number2[2], name:'下线'},
               ]
           }
       ]
   };
   myChart2.setOption(option);
}
</script>
</body>
</html>